/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Animated,
	Ani,
    Modal
} from 'react-native';
import GCStyle from '../../Model/Global/GCStyle';
import GCComponent from '../../Model/Global/GCComponent';

export default class SelectorTool extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0), //设置初始值
            isOpen:false,
            selectName:null,
            selectRow:0
        };
    }

    static propTypes: {
        txtSize: React.PropTypes.string,
        txtColor: React.PropTypes.string,
        selectArr: React.PropTypes.array,
        marTop: React.PropTypes.number,
        isShowSele:React.PropTypes.bool,
    }

    static defaultProps = {
        txtSize: 18,
        txtColor: 'white',//字体颜色
        selectArr: ['选择一', '选择二', '选择三'],
        marTop:24
    };

    componentDidMount() {
        this.setState({
            selectName: this.props.selectArr[0],
        });
    }

    onAction(index) {
        let heightY = 0;
        if (this.state.isOpen) {
            if(index >= 0) {
                this.setState({
                    selectName:this.props.selectArr[index],
                    selectRow:index
                })
            }

            if (this.props.onSelectAction) {
                this.props.onSelectAction(index, this.props.selectArr[index]);
            }
        } 
        else {
            heightY = this.props.selectArr.length * (this.props.txtSize + 26);
        }
        this.setState({
            isOpen:!this.state.isOpen
        })
        Animated.timing(
            this.state.fadeAnim,//初始值
            {toValue: heightY,
                duration:100
            }//结束值
        ).start();//开始
    }

    show(){
        this.onAction(-1);
    }

    onClickView(){
        if (this.state.isOpen) {
            this.onAction(-1);
        }
    }

    render() {
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => this.onClickView()}  style={[styles.container,{marginTop:this.props.marTop,width:this.state.isOpen?GCStyle.GCPubWidth:this.props.txtSize+90}]}>
                {
                    this.props.isShowSele?
                    <TouchableOpacity onPress={() => this.onAction(this.state.selectRow)} style={styles.actionBn}>
                        <Text style={{backgroundColor:'rgba(0,0,0,0)',padding:4,marginRight: 4, fontSize: this.props.txtSize, color: this.props.txtColor}}>{this.state.selectName}</Text>
                        <Image resizeMode='contain' source={this.state.isOpen?require('../../Resource/Imgs/nav_dropdown_aUp.png'):require('../../Resource/Imgs/nav_dropdown_a.png')} style={{width: this.props.txtSize - 6, height: this.props.txtSize - 6}}/>
                    </TouchableOpacity>
                    :null}
                <Modal
                    transparent ={true}
                    animationType={"none"}
                    visible={this.state.isOpen ? true : false}
                    onRequestClose={() => {this._onRequestClose()}}

                >
                    <TouchableOpacity activeOpacity={1} onPress={() => this.onClickView()} >
                        <TouchableOpacity activeOpacity={1} onPress={() => this.onClickView()} style={[{width:GCStyle.GCPubWidth,alignItems:'flex-end',marginTop:40,backgroundColor:'rgba(1,1,1,0.3)',height:this.state.isOpen?GCStyle.GCPubHeight:0}]}>
                            <Animated.View style={{height: this.state.fadeAnim,overflow:'hidden', }}>
                                {
                                    this.props.selectArr.map((item, index) => {
                                        return (
                                            <TouchableOpacity key={index} onPress={() => this.onAction(index)} style={styles.actionBn}>
                                            <Text style={{width:this.props.isShowSele?GCStyle.GCPubWidth:90,padding:12,backgroundColor:item===this.state.selectName?'#f5f5f5':'white', fontSize: this.props.txtSize-2,textAlign:'center',color:'#ACACAC'}}>{item}</Text>
                                                {GCComponent.lineAction(this.props.txtSize + 4, 0)}
                                            </TouchableOpacity>

                                        )
                                    })
                                }
                            </Animated.View>
                        </TouchableOpacity>
                    </TouchableOpacity>
                </Modal>

            </TouchableOpacity>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        position:'absolute',
    },
    actionBn: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    img: {
        width: 50,
        height: 50,
        resizeMode: "center",
    },
});

